<template>
  <view class="components-form">
    <!-- 顶部自定义导航 -->
   <tn-nav-bar fixed  backgroundColor="#4169E1" class="tatils">发布供应货源</tn-nav-bar>
    <!-- 页面内容 -->
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" :fullWindowsScroll="true" @click="click">
        <tn-form :model="model" ref="form" :errorType="errorType" :labelPosition="labelPosition" :labelWidth="labelWidth" :labelAlign="labelAlign">
          <tn-form-item label="品类" prop="sex" :labelPosition="labelPosition" :labelAlign="labelAlign">
            <tn-input v-model="model.cname" type="select" placeholder="请选择采购品类" :border="border" :selectOpen="pickerShow" @click="pickerShow = true"></tn-input>
          </tn-form-item>
		  <tn-form-item label="发布标题" prop="title" :labelPosition="labelPosition" :labelAlign="labelAlign">
            <tn-input v-model="model.title" type="text" placeholder="请输入标题" :border="border"></tn-input>
          </tn-form-item>
		 <!-- <tn-form-item label="店铺头像" prop="photo" :labelPosition="labelPosition" :labelAlign="labelAlign">
		    <tn-image-upload :action="action" :maxCount="1" name="image" :fileList="model.dimage" @on-remove="delmig1" @on-success="imageUploadChange1"></tn-image-upload>
		  </tn-form-item> -->
		  <tn-form-item label="上传图片" prop="photo" :labelPosition="labelPosition" :labelAlign="labelAlign">
		    <tn-image-upload :action="action" :maxCount="6" name="image" :fileList="model.imagelistall" @on-remove="delmig2" @on-success="imageUploadChange2"></tn-image-upload>
		  </tn-form-item>
		  <tn-form-item label="采购数量" prop="num"  :labelPosition="labelPosition" :labelAlign="labelAlign">
		    <tn-input v-model="model.num" type="text" placeholder="请输入供应数量(吨)" :border="border"></tn-input>
		  </tn-form-item>
		  <tn-form-item label="地址" prop="address" :labelPosition="labelPosition" :labelAlign="labelAlign">
			  <tn-input v-model="model.address" type="select" placeholder="请选择地址" :border="border"  @click="dzshow = true"></tn-input>
		    <!-- <tn-input v-model="model.address" type="textarea" placeholder="请输入地址" :border="border" ></tn-input> -->
		  </tn-form-item>
		  <tn-form-item label="联系人" prop="username"  :labelPosition="labelPosition" :labelAlign="labelAlign">
		    <tn-input v-model="model.username" type="text" placeholder="请输入联系人" :border="border"></tn-input>
		  </tn-form-item>
          <tn-form-item label="手机号码" prop="phone"  :labelPosition="labelPosition" :labelAlign="labelAlign">
            <tn-input v-model="model.phone" type="number" placeholder="请输入手机号码" :border="border"></tn-input>
          </tn-form-item>
          <tn-form-item label="简介" prop="desc" :labelPosition="labelPosition" :labelAlign="labelAlign">
            <tn-input v-model="model.desc" type="textarea" placeholder="请输入简介" :border="border" inputAlign="center"></tn-input>
          </tn-form-item>
          <!-- <tn-form-item label="最新报价" prop="money" :labelPosition="labelPosition" :labelAlign="labelAlign">
            <tn-input v-model="model.money" type="textarea" placeholder="请再次最新报价" :border="border"></tn-input>
          </tn-form-item> -->
        </tn-form>
        
        <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" width="100%" @click="submit">提交</tn-button>
      </dynamic-demo-template>
      <!-- 地区picker -->
    <!--  <tn-picker
        v-model="dzshow"
        mode="region"
		:params="params"
        @confirm="regionPickerConfirm"
      ></tn-picker> -->
     <tn-popup v-model="dzshow" mode="right" width="600rpx">
     	<nyn :hot="true" @bindCity="bindCity"></nyn>
     </tn-popup>
      <tn-select v-model="pickerShow" mode="single" valueName="id" labelName="name" :list="hylist" @confirm="confirm"></tn-select>
    </view>
    
  </view>
</template>

<script>
	import nyn from '@/components/nyn-city-list/nyn-city-list.vue'
	import {getclist,getaddfb} from '@/apis/cg.js'
  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
  export default {
    name: 'componentsForm',
    components: {dynamicDemoTemplate,nyn},
    data() {
      return {
		  params :{
		      province: true,
		      city: true,
		      area: false
		  },
		action: 'https://cs4.hephp.cn/index/index/uploads',
        errorType: ['message','border-bottom','toast'],
        labelPosition: 'left',
        labelAlign: 'right',
        border: false,
		dzshow: false,
        actionSheetShow: false,
        labelWidth: 150,
        checkboxWidth: 'auto',
        checkboxWrap: false,
        radioWidth: 'auto',
        radioWrap: false,
        pickerShow: false,
        selectShow: false,
        codeTips: '获取验证码',
		hylist: [],
		model: {
          num: '',
          title: '',
          cname:'',
          cid: '',
          imagelist: [],
		  imagelistall: [],
          phone: '',
          username: '',
          address: '',
          // money: '',
          uid: uni.getStorageSync('uid'),
          status: '',
        },
        rules: {
			title: [{required: true, message: '请输入标题', trigger: 'blur'}],
			// dimage: [{required: true, message: '请上传图片', trigger: 'blur'}],
			imagelist: [{required: true, message: '请上传图片', trigger: 'blur'}],
			num: [{required: true, message: '请输入吨数', trigger: 'blur'}],
			cid: [{required: true, message: '请选择类目', trigger: 'blur'}],
			phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
			username: [{required: true, message: '请输入联系人', trigger: 'blur'}],
			address: [{required: true, message: '请输入地址', trigger: 'blur'}],
			// money: [{required: true, message: '请输入最新报价', trigger: 'blur'}]
		},
        tips: ['请完整填写表单数据!'],
        sectionList: [
          {
            name: '参数切换',
            section: [
              {
                title: 'label显示位置',
                optional: ['左边','上边'],
                methods: 'labelPositionChange'
              },
              {
                title: 'label对齐方式',
                optional: ['左对齐','右对齐','居中'],
                methods: 'labelAlignChange',
                current: 1
              },
              {
                title: '边框显示',
                optional: ['显示','隐藏'],
                methods: 'borderChange',
                current: 1
              },
              {
                title: '可选项排列方式',
                optional: ['默认','宽度的50%','换行'],
                methods: 'checkRadioStyleChange'
              },
              {
                title: '错误提示方式',
                optional: ['message','toast','下划线','输入框'],
                methods: 'errorTypeChange'
              }
            ]
          }
        ]
      }
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
	onLoad() {
		this.gethylists()
	},
    methods: {
		bindCity(event){
			this.model.address =  event.name
			this.dzshow = false
		},
		gethylists(){
			getclist().then(res => {
				console.log(res)
				if(res.code==200){
					this.hylist = res.data
				}
			}).catch(error => {
				that.tool.toastTip('货源分类报错', 'none', 1000)
			})
		},
		confirm(e) {
				console.log(e);
				this.model.cid = e[0].value
				this.model.cname = e[0].label
		},
		
      click(event) {
        this[event.methods] && this[event.methods](event)
      },
      // 切换label显示位置
      labelPositionChange(event) {
        switch (event.index) {
          case 0:
            this.labelPosition = 'left'
            break
          case 1:
            this.labelPosition = 'top'
            break
        }
      },
      // 切换label对其方式
      labelAlignChange(event) {
        switch (event.index) {
          case 0:
            this.labelAlign = 'left'
            break
          case 1:
            this.labelAlign = 'right'
            break
          case 2:
            this.labelAlign = 'center'
            break
        }
      },
      // 切换边框显示
      borderChange(event) {
        this.border = event.index === 0 ? true : false
      },
      // 切换可选项样式
      checkRadioStyleChange(event) {
        switch (event.index) {
          case 0:
            this.checkboxWidth = 'auto'
            this.checkboxWrap = false
            this.radioWidth = 'auto'
            this.radioWrap = false
            break
          case 1:
            this.checkboxWidth = '50%'
            this.checkboxWrap = false
            this.radioWidth = '50%'
            this.radioWrap = false
            break
          case 2:
            this.checkboxWidth = 'auto'
            this.checkboxWrap = true
            this.radioWidth = 'auto'
            this.radioWrap = true
            break
        }
      },
      // 切换错误提示方式
      errorTypeChange(event) {
        switch (event.index) {
          case 0:
            this.errorType = ['message']
            break
          case 1:
            this.errorType = ['toast']
            break
          case 2:
            this.errorType = ['border-bottom']
            break
          case 3:
            this.errorType = ['border']
            break
        }
      },
      
      
      // 表单提交
      submit() {
           this.$refs.form.validate(valid => {
            // 验证通过
            // if (!this.model.agreement) {
            //   this.$tn.message.toast('请勾选协议')
            //   return
            // }
			if (valid) {
			getaddfb(this.model).then(res => {
				console.log(res)
				if(res.code==200){
					this.$tn.message.toast('保存完成!')
					setTimeout(() => {
					      uni.navigateTo({
					      	url: '/pages/job/job'
					      })
					}, 2000); // 2000毫秒后执行更新
				}else{
					this.$tn.message.toast(res.message)
				}
			}).catch(error => {
				 this.$tn.message.toast('请完整填写数据!')
			})
			}else{
				this.$tn.message.toast('请完整填写数据!')
			}
		})
      },
      // 点击actionSheet选择性别
      actionSheetClick(index) {
        uni.hideKeyboard()
        this.model.sex = this.actionSheetList[index].text
      },
      // 点击地区选择器
      regionPickerConfirm(event) {
         this.model.address =  event.city.label
      },
      // 点击商品类型列选择器
      goodsTypeSelectConfirm(event) {
        this.model.goodsType = `${event[0]['label']}`
      },
      // 多选项值改变事件
      checkboxGroupChange(event) {
        this.model.fruit = event
      },
      // 单选项值改变事件
      radioGroupChange(event) {
        this.model.payType = event
      },
      // 获取验证码
      getCode() {
        if (this.$refs.code.canGetCode) {
          this.$tn.message.loading('正在获取验证码')
          setTimeout(() => {
            this.$tn.message.closeLoading()
            this.$tn.message.toast('验证码已经发送')
            // 通知组件开始计时
            this.$refs.code.start()
          }, 2000)
        } else {
          this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
        }
      },
      // 验证码倒计时时间改变
      codeChange(text) {
        this.codeTips = text
      },
      // 图片有修改
      imageUploadChange(lists) {
        this.model.photo = lists
      },
      // 同意协议状态修改
      agreementCheckChange(event) {
        this.model.agreement = event.value
      },
	  
	     
	  delmig1(index, lists, name){
	  		          this.model.dimage = ''
	  },
	  // 图片有修改
	  imageUploadChange1(data, index, lists, name) {
	  		 
	  		  let arr = []
	  		  let that = this
	  		// console.log(data)
	    this.model.dimage = data
	  		console.log(this.model)
	  },
	  delmig2(index, lists, name){
	  		    console.log(index)
	  			let arr = this.model.imagelist
	  			arr.splice(index, 1);
	  		this.model.imagelist = arr
	  },
	  imageUploadChange2(data, index, lists, name) {
	  		  console.log(data)
	  		  console.log(lists)
	  		  let arr = this.model.imagelist
	  		  arr.push(data)
	      this.model.imagelist = arr
	  		  console.log(this.model)
	  },
    }
  }
</script>

<style lang="scss" scoped>
  .tatils{
  	color: #fff;
  }
  .agreement {
    display: flex;
    align-items: center;
    margin: 40rpx 0;
    
    &-text {
      padding-left: 8rpx;
      color: $tn-font-sub-color;
    }
  }
  
</style>
